﻿<style type="text/css">
    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
    }
</style>
<div id="main" style="width: 100%;height:100%;"></div>

<script src="~/Content/lib/echarts/echarts.min.js"></script>
<script>
    layui.use(['jquery'], function () {
        var $ = layui.jquery;
        var myChart = echarts.init($("#main")[0]);
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '租赁统计',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: ['库位总量', '已租赁量']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['园区二', '园区一', '园区三', '所有园区']
            },
            series: [
                {
                    name: '库位总量',
                    type: 'bar',
                    data: [200, 350, 650, 1200]
                },
                {
                    name: '已租赁量',
                    type: 'bar',
                    data: [100, 250, 350, 700]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
</script>